<template>
  <div class="main" v-loading="loading">
    <div class="search">
      <el-input suffix-icon="el-icon-search" placeholder="请输入货品名称或编号" v-model="search" type="search"
                @change="searchGoods"></el-input>
    </div>
    <div class="result">
      <el-collapse>
        <div v-if="result.length === 0" class="no-data">无数据</div>
        <el-collapse-item v-for="item in result" :title="item.spname" :key="item.spbh">
          <template slot="title">
            {{ item.spname }}
            <el-tag size="small" :type="item.msky > 0? 'success' : 'danger'" style="margin: 5px;">{{ '门市：'+ item.msky + item.dw2}}</el-tag>
            <el-tag size="small" :type="item.ckky > 0? 'success' : 'danger'">{{ '仓库：'+ item.ckky + item.dw2 }}</el-tag>
          </template>
          <div class="des-box-border">
            <el-row class="des-box">
              <el-col :span="6" class="des-title">商品编号</el-col>
              <el-col :span="6" class="des-content">{{ item.spbh }}</el-col>
              <el-col :span="6" class="des-title">最新进价</el-col>
              <el-col :span="6" class="des-content">{{ item.newjj }}</el-col>
              <el-col :span="6" class="des-title">规格</el-col>
              <el-col :span="6" class="des-content">{{ item.gg }}</el-col>
              <el-col :span="6" class="des-title">价格</el-col>
              <el-col :span="6" class="des-content">{{ item.jg }}</el-col>
              <el-col :span="6" class="des-title">门市库存</el-col>
              <el-col :span="6" class="des-content">
                <el-tag size="mini" :type="item.mskc > 0? 'success' : 'danger'">{{ item.mskc + item.dw2 }}</el-tag>
              </el-col>
              <el-col :span="6" class="des-title">门市可用</el-col>
              <el-col :span="6" class="des-content">
                <el-tag size="mini" :type="item.msky > 0? 'success' : 'danger'">{{ item.msky + item.dw2 }}</el-tag>
              </el-col>
              <el-col :span="6" class="des-title">仓库库存</el-col>
              <el-col :span="6" class="des-content">
                <el-tag size="mini" :type="item.ckkc > 0? 'success' : 'danger'">{{ item.ckkc + item.dw2 }}</el-tag>
              </el-col>
              <el-col :span="6" class="des-title">仓库可用</el-col>
              <el-col :span="6" class="des-content">
                <el-tag size="mini" :type="item.ckky > 0? 'success' : 'danger'">{{ item.ckky + item.dw2 }}</el-tag>
              </el-col>
              <el-col :span="6" class="des-title">远洋库存</el-col>
              <el-col :span="6" class="des-content">{{ item.yykc }}</el-col>
              <el-col :span="6" class="des-title">大昌库存</el-col>
              <el-col :span="6" class="des-content">{{ item.dckc }}</el-col>
              <el-col :span="6" class="des-title">增城库存</el-col>
              <el-col :span="6" class="des-content">{{ item.zckc }}</el-col>
              <el-col :span="12" class="des-content" style="justify-content: center">
                <el-link :underline="false" @click="getHistory(item.spbh)">查询最近售价</el-link>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {queryGoods} from "@/api/goods";

export default {
  name: "index",
  data() {
    return {
      search: '',
      result: [],
      loading: false
    }
  },
  methods: {
    searchGoods() {
      this.loading = true
      queryGoods(this.search).then(res => {
        if (res.code === 200) {
          this.result = res.data
          if (res.data.length === 0) {
            this.$toast.open({
              message: '无数据',
              type: 'warning',
              duration: 2000,
              dismissible: true,
              position: 'top'
            })
          }
        }
      }).finally(_ => {
        this.loading = false
      })

      this.$buryingPoint('商品查询', this.search)
    },
    getHistory(spbh) {
      this.$router.push({path: "/Goods/historyPrice", query: {spbh}})
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  max-width: 600px;
  padding: 10px;
  text-align: center;

  .search {
  }

  .result {
    .no-data {
      padding: 20px;
      color: #ccc;
    }

    .des-box-border {
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
      //-moz-box-shadow:2px 2px 10px #06C;
      //-webkit-box-shadow:2px 2px 10px #06C;
      //box-shadow:0 2px 4px #06C, 0 0 6px #06C;
    }

    .des-box {
      border-top: 1px solid #0766bd;
      border-left: 1px solid #0766bd;
      border-radius: 10px;
    }

    .des-title {
      color: white;
      height: 25px;
      background-color: #6385fa;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #0766bd;
      border-right: 1px solid #0766bd;
    }

    .des-title:first-child {
      border-top-left-radius: 10px;
    }

    //.des-title:nth-child(5) {
    //  border-top-right-radius: 10px;
    //}
    //
    .des-title:nth-child(21) {
      border-bottom-left-radius: 10px;
    }

    .des-content:nth-child(4) {
      border-top-right-radius: 10px;
    }

    .des-content:nth-child(23) {
      border-bottom-right-radius: 10px;
    }

    .des-content {
      height: 25px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      border-bottom: 1px solid #6595c7;
      border-right: 1px solid #6595c7;
    }
  }
}
</style>
